<template>
  <div class="tags">
    <div class="nav">
      <div>
        <span>标签名</span>
        <el-input
          label="标签名"
          placeholder="请输入标签名"
          v-model="searchForm.name"
          style="width: 400px"
          clearable>
        </el-input>
      </div>
      <el-button style="margin-left: 10px" type="primary" @click="searchPageList">查询</el-button>
      <el-button type="success" @click="tagsDialog">新增标签</el-button>
    </div>
    <main>
      <el-table
        :data="tableList"
        style="margin: 10px"
        align="center">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column

          prop="name"
          label="标签名"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="创建人"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.createTime ? $moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateBy"
          label="修改人"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.updateTime ? $moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="registrationCode"
          label="邀请码"
          align="center">
        </el-table-column>
        <el-table-column

          label="操作"
          align="center">
          <template slot-scope="scope">
<!--            <el-button @click="updateChange(scope.row)" type="primary" size="small">修改</el-button>-->
            <span class="btnSpan" @click="updateChange(scope.row)"><i class="el-icon-edit"></i>修改</span>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="是否确定删除"
              @confirm="deleteLabel(scope.row.id)"
              style="margin: 0 5px"
            >
<!--              <el-button slot="reference" type="danger" size="small">删除</el-button>-->
              <span slot="reference" class="btnSpan"><i class="el-icon-delete"></i>删除</span>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :hide-on-single-page="tatolBlur"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.current"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </main>
    <!--  新增标签弹窗-->
    <el-dialog
      :title="dialogTile"
      :visible.sync="addtagsDialog"
      width="30%">
      <el-form :model="addTagsForm" ref="addTagsForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="标签名称"
          prop="name"
          :rules="[
      { required: true, message: '标签名称不能为空'},
    ]"
        >
          <el-input v-model="addTagsForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addtagsDialog = false">取 消</el-button>
    <el-button type="primary" @click="addTagsSure('addTagsForm')">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import {ajax} from "@/config/strategy";

export default {
  name: "tags",
  data() {
    return {
      dialogTile:'新增标签',
      tatolBlur:false,
      addtagsDialog: false,
      addTagsForm: {
        name: null,
      },
      updateTagsForm:{
        id:null,
        name: null,
      },
      tableList:null,
      total:0,
      searchForm: {
        current: 1,
        size: 10,
        name:null,
        params:{
          beginTime:null,
          endTime:null,
        }
      },
    }
  },
  mounted() {
    this.searchPageList()
  },
  methods: {
    //标签查询
    //删除标签
    deleteLabel(row){
      let pms={
        id:row
      }
      ajax.DeleteLabel(pms).then(res=>{
        const {data,msg,code}=res.data
        if (code=='00000'){
          this.$message.success(msg)
          this.searchPageList()
        }else {
          this.$message.error(msg)
        }
      })
    },
    //标签查询
    searchlableList() {
      ajax.lableList().then(res => {
        this.lableList = res.data
      })
    },
    handleSizeChange(val) {
      this.searchForm.size=val
      this.searchPageList()
    },
    handleCurrentChange(val) {
      this.searchForm.current=val
      this.searchPageList()
    },
    //列表查询
    searchPageList() {
      var pms
      if (this.searchForm.params.beginTime == null || this.searchForm.params.endTime == null) {
        pms = {
          current: this.searchForm.current,
          size: this.searchForm.size,
          name: this.searchForm.name,
        }
      } else {
        pms = this.searchForm
      }
      ajax.searchlabel(pms).then(res => {
        const {data, code} = res
        if (code == '00000') {
          this.tableList = data.records
          this.total = data.total
          if (this.total <= 10) {
            this.tatolBlur = true
          }
        }
      })
    },
    //新增弹窗
    tagsDialog() {
      this.addtagsDialog = true
      this.dialogTile='新增标签'
      this.addTagsForm.name=null
    },
    //修改弹窗
    updateChange(row){
      this.addtagsDialog = true
      this.dialogTile='修改标签'
      this.updateTagsForm=row
      this.addTagsForm.name=row.name
    },
    addTagsSure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogTile=='新增标签'){
            ajax.addlabel(this.addTagsForm).then(res => {
              const {code,msg}=res.data
              if (code=='00000'){
                this.$message.success(msg)
                this.addtagsDialog = false
                this.searchPageList()
              }else {
                this.$message.error(msg)
              }

            })
          }else {
            var pms={
              id: this.updateTagsForm.id,
              name:this.addTagsForm.name
            }
            ajax.updateLabel(pms).then(res => {
              const {code,msg}=res
              if (code=='00000'){
                this.$message.success(msg)
                this.addtagsDialog = false
                this.searchPageList()
              }else {
                this.$message.error(msg)
              }
            })
          }
        } else {
          this.$message.warning('请检查是否输入正确')
        }
      })

    }
  }
}
</script>

<style scoped lang="scss">
.tags {
  background-color: #fff;
  min-height: 100%;
  overflow: hidden;

  .nav {
    margin: 15px;
    display: flex;
    div{
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        display: inline-block;
        border: 1px solid #DCDFE6;
        height: 38px;
        line-height: 38px;
        margin-right: -2px;
        padding: 0 4px;
        font-size: 12px;
      }
    }
  }
}
</style>
